---
import LayoutHtml from '@/layouts/LayoutHtml.astro';
import LayoutBody from '@/layouts/LayoutBody.astro';
import LayoutMain from '@/layouts/LayoutMain.astro';
---

<LayoutHtml>
<LayoutBody>
<LayoutMain>
  <!-- 登录页面容器 -->
  <div class="min-h-screen flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
    <div class="max-w-md w-full space-y-8">
      <!-- Logo 和标题 -->
      <div class="text-center">
        <h2 class="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white">
          登录您的账户
        </h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
          或使用第三方账号快速登录
        </p>
      </div>

      <!-- 登录表单 -->
      <form class="mt-8 space-y-6" action="/nice/user/login" method="POST">
        <div class="rounded-md -space-y-px">
          <!-- 用户名/邮箱输入框 -->
          <div>
            <label for="username" class="sr-only">用户名或邮箱</label>
            <input 
              id="username" 
              name="username" 
              type="text" 
              required 
              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" 
              placeholder="用户名或邮箱"
            >
          </div>
          
          <!-- 密码输入框 -->
          <div>
            <label for="password" class="sr-only">密码</label>
            <input 
              id="password" 
              name="password" 
              type="password" 
              required 
              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" 
              placeholder="密码"
            >
          </div>
        </div>

        <!-- 记住我和忘记密码 -->
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input 
              id="remember-me" 
              name="remember-me" 
              type="checkbox" 
              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" 
            >
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-white">
              记住我
            </label>
          </div>
          <div>
            <a href="/nice/user/forgot" class="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">
              忘记密码？
            </a>
          </div>
        </div>

        <!-- 登录按钮 -->
        <div>
          <button 
            type="submit" 
            class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transition duration-300 ease-in-out transform hover:-translate-y-0.5"
          >
            登录
          </button>
        </div>
      </form>

      <!-- 分隔线 -->
      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-gray-900 text-gray-500 dark:text-gray-400">
            或使用以下方式登录
          </span>
        </div>
      </div>

      <!-- 第三方登录选项 -->
      <div class="grid grid-cols-3 gap-3">
        <!-- QQ登录 -->
        <a href="/nice/oauth2/qq" class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:-translate-y-0.5">
          <svg class="h-5 w-5 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 16h2v-6h-2v6zm0-8h2V7h-2v3z"></path>
          </svg>
          <span class="ml-2">QQ</span>
        </a>
        
        <!-- 微信登录 -->
        <a href="/nice/oauth2/wechat" class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:-translate-y-0.5">
          <svg class="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 16h2v-6h-2v6zm0-8h2V7h-2v3z"></path>
          </svg>
          <span class="ml-2">微信</span>
        </a>
        
        <!-- GitHub登录 -->
        <a href="/nice/oauth2/github" class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:-translate-y-0.5">
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"></path>
          </svg>
          <span class="ml-2">GitHub</span>
        </a>
      </div>

      <!-- 注册链接 -->
      <div class="text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400">
          还没有账号？
          <a href="/nice/user/register" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition duration-300">
            立即注册
          </a>
        </p>
      </div>
    </div>
  </div>
</LayoutMain>
</LayoutBody>
</LayoutHtml>

<script>
  // 表单验证逻辑
  document.querySelector('form').addEventListener('submit', function(event) {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    
    // 简单的前端验证
    if (!username || !password) {
      alert('请填写用户名和密码');
      event.preventDefault();
      return;
    }
    
    // 如果是邮箱格式，进行简单验证
    if (username.includes('@')) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(username)) {
        alert('请输入有效的邮箱地址');
        event.preventDefault();
        return;
      }
    }
  });
</script>